<template>
  <div class="item-bg" style="width: 100%; height: 100%">
    <span class="title">评阅详情</span>
    <a-table
      class="tabsty"
      rowKey="index"
      :pagination="false"
      :columns="columns"
      :scroll="{ y: 'calc(100vh - 500px)', x: 2000 }"
      :data-source="list"
      :loading="loading"
      size="small"
      bordered
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'pyJdRate'">
          <a-progress
            :stroke-color="colorFix(text)"
            :percent="!Number(text) ? 0 : Number(Number(Number(text) * 100).toFixed(2))"
          />
        </template>

        <template v-if="column.dataIndex == 'operation'">
          <span style="color: #136cc4; cursor: pointer" @click="toSee(record)"> 查看 </span>
        </template>
      </template>
    </a-table>
    <!-- <a-pagination
      class="pagination"
      :show-total="(total) => `共 ${total} 条`"
      :show-size-changer="false"
      show-quick-jumper
      v-model:current="curPage"
      v-model:pageSize="pageSize"
      :total="total"
    /> -->
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import dayjs from 'dayjs'
import { useList } from '/@/hooks/web/useList'
import { reviewpaperCondition } from '/@/api/examinationAudit'
import duration from 'dayjs/plugin/duration'
import { map } from 'lodash-es'

dayjs.extend(duration)

const router = useRouter()
const route = useRoute()

const { list, loading } = useList(reviewpaperCondition, {
  defaultFilterOption: {
    kmYear: route.query.kmYear,
    kmdm: route.query.kmdm,
    kmpyzt: route.query.Kmpyzt,
  },
  transformFn: resp => {
    const { data } = resp
    return {
      data: map(data.subjectiveList || [], (v, index) => ({ ...v, index: index + 1 })),
      total: data?.subjectiveList?.length,
    }
  },
})

const columns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 60,
    fixed: true,
  },
  {
    title: '试题类型',
    dataIndex: 'stLx',
    key: 'stLx',
    align: 'center',
  },
  {
    title: '试题结构',
    dataIndex: 'stMc',
    key: 'stMc',
    align: 'center',
  },
  // {
  //   title: '评阅教师',
  //   dataIndex: 'yjLsMc',
  //   key: 'yjLsMc',
  //   align: 'center',
  // },
  {
    title: '评阅进度',
    dataIndex: 'pyJdRate',
    key: 'pyJdRate',
    align: 'center',
    width: 230,
  },
  {
    title: '试题总分',
    dataIndex: 'stScoreTotal',
    key: 'stScoreTotal',
    align: 'center',
  },
  {
    title: '试题总量',
    dataIndex: 'stCount',
    key: 'stCount',
    align: 'center',
    customRender: ({ text }) => {
      if (!text) return '--'
      return text
    },
  },
  {
    title: '待评阅试题数',
    dataIndex: 'handleCount',
    key: 'handleCount',
    align: 'center',
    customRender: ({ text }) => {
      if (!text) return '--'
      return text
    },
  },
  {
    title: '已评试题数',
    dataIndex: 'overCount',
    key: 'overCount',
    align: 'center',
    customRender: ({ text }) => {
      if (!text) return '--'
      return text
    },
  },
  {
    title: '平均评卷时长',
    dataIndex: 'avgPySc',
    key: 'avgPySc',
    align: 'center',
    customRender: ({ text }) => {
      if (text == null) return '--'
      let time = +new Date('2023-01-01') + 1000 * text
      return dayjs.duration(time || 1000).format('HH:mm:ss')
    },
  },
  {
    title: '试题总分',
    dataIndex: 'tmMf',
    key: 'tmMf',
    align: 'center',
    customRender: ({ text }) => {
      if (text == null) return '--'
      return text
    },
  },
  {
    title: '试题最高分',
    dataIndex: 'maxTmDf',
    key: 'maxTmDf',
    align: 'center',
    customRender: ({ text }) => {
      if (text == null) return '--'
      return text
    },
  },
  {
    title: '试题最低分',
    dataIndex: 'minTmDf',
    key: 'minTmDf',
    align: 'center',
    customRender: ({ text }) => {
      if (text == null) return '--'
      return text
    },
  },
  {
    title: '试题平均分',
    dataIndex: 'avgTmDf',
    key: 'avgTmDf',
    align: 'center',
    customRender: ({ text }) => {
      if (text == null) return '--'
      return text
    },
  },
  // {
  //   title: '异常数',
  //   dataIndex: 'ycNum',
  //   key: 'ycNum',
  //   align: 'center',
  //   customRender: ({ text }) => {
  //     if (text == null) return '--'
  //     return text
  //   },
  // },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    width: 100,
    fixed: 'right',
  },
])
//查看试卷
const toSee = row => {
  router.push({
    name: `teacherDetail`,
    query: {
      id: row.jsxxId,
      Kmpyzt: route.query.Kmpyzt,
      kmYear: route.query.kmYear,
      kmdm: route.query.kmdm,
      stLx: row.stLx,
    },
  })
}

function colorFix(text) {
  const num = !Number(text) ? 0 : Number(Number(Number(text) * 100).toFixed(2))
  const color = {
    0: '#dc2626',
    100: '#87d068',
  }

  return color[num] || '#fcd34d'
}

onMounted(() => {})
</script>
<style lang="less" scoped>
.item-bg {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(128, 144, 219, 0.16);
  border-radius: 6px 6px 6px 6px;
  position: relative;

  .title {
    width: 100%;
    padding: 16px;
    font-weight: bold;
    color: #3f4355;
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    border-bottom: 2px solid #f0f1f8;
  }
}

.search {
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tabsty {
  margin: 0 0 10px 0;
}

.pagination {
  padding: 10px 0 0 20px;
}

.form {
  padding: 20px;
}
</style>
<style lang="less">
.teacherList {
  .ant-table-thead > tr > th {
    background: #f2f2f2 !important;
  }
}
</style>
